<template>
	<div class="wap-nav">
    <div class="nav-editor">
      <button type="btn" class="nav-btn" @click="navEditor">编辑</button>
    </div>
    <div class="tab-container">
      <span class="span selected">首页</span>
		  <span class="span" v-for="(nav, index) in navLists" :key="index" v-if="nav.isOpen != 1">{{nav.navigationName}}</span>
    </div>
    <div class="popup">
      <!-- 编辑导航弹框 -->
      <div id="edit-nav">
        <w-panel-fixed-wrap class="cb" title="导航" width="678px" height="420px" 
          @on-confirm="closeWin" @on-cancel="hidePopup" v-model="show">
          <w-button type="main" slot="title" @on-click="addNav()">添加</w-button>  
          <div class="nav-list">
            <span>首页</span>
          </div>
          <div class="nav-list animated" :class="{slideOutLeft: (itemIndex == index)}" v-for="(nav, index) in navLists" :key="index"> 
            <!-- 导航列名称（不可编辑） -->
            <span v-text="nav.navigationName"></span>
            <!-- 操作按钮 -->
            <span class="operation">
              <span class="edit" @click="editNav(nav, index)">修改</span>
              <span class="delete" v-if="index > 0" @click="deleteNav(index, nav.id)">删除</span>
            </span>
          </div>
          <div class="tip">
            最多可以设置3个关键词
          </div>
        </w-panel-fixed-wrap>
      </div>
      <!-- 设置导航的关键词弹框 -->
      <div id="set-keyword">
        <w-panel-fixed-wrap class="cb" v-model="showEditKeyWord" title="新增导航" width="1000px" 
          height="500px" @on-confirm="addNewNavToRemote" @on-cancel="hideEditKeyWord">
          <div class="search">
            关键字名称<w-input class="ml28" :validate="false" v-model="params.navigationName"></w-input>
          </div>
          <!-- 关联搜索组件 -->
          <associated-search @on-input="getInputValue" @header="setNavigationType"></associated-search>
          <!-- 添加商品和已选商品选项框 -->
          <div class="add-exists-goods" v-show="!params.navigationType">
            <product-group :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
          </div>
        </w-panel-fixed-wrap>
      </div>

      <!-- 设置导航的全部宝贝是否展示 -->
      <div id="set-all">
        <w-panel-fixed-wrap class="cb" v-model="showShowAllGoods" title="设置是否展示" width="675px" 
          height="214px" @on-confirm="handlerShowOrHideAllGoods" @on-cancel="hideEditKeyWord">
          <div class="choose">
            全部宝贝是否展示：
            <w-radio name="show-all" label="0" v-model="isShowAll"><span>是</span></w-radio>
            <w-radio name="show-all" label="1" v-model="isShowAll"><span>否</span></w-radio>
          </div>
        </w-panel-fixed-wrap>
      </div>
    </div>
	</div>
</template>
<script>
 // 商品组件
  import productGroup from '../pc/productGroup'

  // 关联商品搜索组件
  import associatedSearch from '../pc/associatedSearch'

  // 获取接口操作对象
  import { apiAdornWAP } from '../../../common/api'

  // 导入检验的js
  import { validateNavParam, inSelectedGoodsList } from '../validate'

  export default {
    data() {
      return {
        navLists: [],
        indexsle: 0,
        show: false,
        showShowAllGoods: false,
        wordType: 'goods',
        goodsList: [],
        itemIndex: -1,
        showEditKeyWord: false,
        isShowAll: 0,
        params: {
          id: '',
          accessToken: this.$store.getters.token,
          decorationType: 'WAP',
          navigationName: '',
          navigationType: 0,
          goodsIdList: '',
          goodsDetailUrl: '',
          isEdit: false
        }
      }
    },
    created() {
      this.handlerNavList()
    },
    methods: {
      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.navigationType = 1
          this.params.goodsDetailUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.navigationType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornWAP.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }

            // 遍历数据
            data.list.forEach((v) => {
              // 如果当前商品不在已选列表中
              if (!inSelectedGoodsList(v, this.params.goodsList)) {
                this.goodsList.push(v)
              }
            })
          })
        }
      },

      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.navigationType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.navigationType = 0
        }
      },

      /**
       * 获取导航列表
       */
      handlerNavList() {
        apiAdornWAP.getNavigationList(this.$store.getters.token).then((data) => {
          this.navLists = (data.list || [])

          // 如果第一个是首页
          if (this.navLists && this.navLists.length > 0 && this.navLists[0].navigationName == '首页') {
            this.navLists.splice(0, 1)
          }
          // 取出全部宝贝的是否展示
          this.isShowAll = this.navLists[0].isOpen
        })
      },

      /**
       * 新增一个导航列项
       */
      addNav() {
        // 如果导航长度为9
        if (this.navLists.length > 2) {
          this.$toast('最多只可以设置3个关键词')
          return
        }

        // 隐藏编辑导航弹框
        this.showEditNav = false

        // 展示设置关键词弹框
        this.showEditKeyWord = true

        // 初始化参数
        this.params = {
          id: '',
          accessToken: this.$store.getters.token,
          decorationType: 'WAP',
          navigationName: '',
          navigationType: 0,
          goodsIdList: '',
          goodsDetailUrl: '',
          // 不可编辑状态
          isEdit: false
        }
      },

      /**
       * 展示所有商品或隐藏
       */
      handlerShowOrHideAllGoods() {
        apiAdornWAP.apiUpdateShowAllGoods(this.$store.getters.token, this.isShowAll, 'WAP').then(v => {
          this.showShowAllGoods = false
          this.show = true
        })
      },

      /**
       * 添加新导航
       */
      addNewNavToRemote() {
        // 校验入参
        if (!validateNavParam(this.params)) {
          return
        }

        // 关键词是否存在
        let isExists = false

        // 校验关键词是否存在
        if (this.navLists && this.navLists.length > 0) {
          this.navLists.forEach((v) => {
            if (v.navigationName == this.params.navigationName && v.id != this.params.id) {
              this.$toast('该关键字已存在')
              isExists = true
              return
            }
          })
        }

        // 如果关键词存在，则抛出
        if (isExists) return

        // 如果当前是编辑
        if (this.params.isEdit) {
          // 请求数据
          apiAdornWAP.editNavigation(this.params).then((data) => {
            // 重新加载数据
            this.handlerNavList()

            // 隐藏弹框
            this.hideEditKeyWord()
          })
          return
        }

        // 请求数据
        apiAdornWAP.addNavigation(this.params).then((data) => {
          // 重新加载数据
          this.handlerNavList()

          // 隐藏弹框
          this.hideEditKeyWord()
        })
      },

      tab(index) {
        this.indexsle = index
      },
      navEditor() {
        this.show = true
      },
      hidePopup() {
        this.show = false
      },

      hideEditKeyWord() {
        // 清空商品列表
        this.goodsList = []

        // 展示编辑导航弹框
        this.show = true

        // 隐藏设置关键词弹框
        this.showEditKeyWord = false
      },

      /**
       * 删除导航列项（删除女装等）
       *
       * @params { Integer } index 当前操作的列项索引
       * @params { Integer } navId 导航id
       */
      deleteNav(index, navId) {
        // 获取vue的this
        let $this = this

        // 弹框
        this.$modal({
          title: '删除',
          content: '是否删除此项导航列项',
          onConfirm() {
            apiAdornWAP.deleteNavigation(navId, $this.$store.getters.token).then((data) => {
              // 删除动画效果
              $this.itemIndex = index

              // 等动画执行完成，从数组中删除
              setTimeout(() => {
                $this.itemIndex = -1
                $this.navLists.splice(index, 1)
              }, 400)
            })
          }
        })
      },

      /**
       * 使导航列项可编辑
       *
       * @param { Object } nav   导航列项
       * @param { Number } index 当前是第几个商品
       */
      editNav(nav, index) {
        // 如果当前是全部商品
        if (index == 0) {
          this.showAll()
          return
        }

        // 隐藏编辑导航弹框
        this.show = false

        // 展示设置关键词弹框
        this.showEditKeyWord = true

        // 商品id集合
        let goodsIds = []

        // 商品id
        if (nav.goodsList) {
          nav.goodsList.forEach((v) => {
            goodsIds.push(v.goodsId)
          })
        }

        // 初始化参数
        this.params = {
          id: nav.id,
          accessToken: this.$store.getters.token,
          decorationType: 'WAP',
          navigationName: nav.navigationName,
          navigationType: nav.navigationType,
          goodsIdList: goodsIds.join(','),
          goodsList: nav.goodsList,
          goodsDetailUrl: nav.goodsDetailUrl,
          // 不可编辑状态
          isEdit: true
        }
      },

      /**
       * 使导航列项不可编辑
       *
       * @param { Object } nav 导航列项
       */
      overEditNav(nav) {
        nav.isEdit = false
      },

      /**
       * 关闭窗体
       */
      closeWin() {
        // 请求一下接口
        this.handlerNavList()
        // 展示弹框
        this.show = false
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } type 关键字类型
       */
      setWordType(type) {
        this.wordType = type
      },

      // 展示是否全部显示宝贝弹窗
      showAll() {
        this.showShowAllGoods = true
        this.show = false
      }
    },
    components: {
      productGroup,
      associatedSearch
    }
  }
</script>
<style lang="scss" scoped>
@import '../pc/style.scss';
	.wap-nav {
    position: relative;
    width: 100%;
    height: 80px;
    margin-top: 10px;
    background-color: #fff;
    &:hover {
      .nav-editor {
        display: block;
      }
    }
    .span {
      display: inline-block;
      font-size: 30px;
      margin: 0 5%;
      text-align: center;
      line-height: 80px;
      max-width: 130px;
      overflow: hidden;
      word-wrap: normal;
      word-spacing: normal;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.selected {
        color: #f00384;
        border-bottom: 5px solid #f00384
      }
    }
    .nav-editor {
      display: none;
      position: absolute;
      background-color: rgba(222,175,200,0.5);
      width: 100%;
      height: 100%;
      padding: 20px 10px;
      .nav-btn {
        width: 120px;
        height: 40px;
        background-color: #f20685;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        float: right;
      }
    }
  }
  .choose {
    label {
      margin-left: 32px;
    }
  }
</style>